<template>
  <div class="top">
    <div class="top-logo">
      <img src="../../assets/imgs/logo.png" alt />
      <div class="top-search">
        <div class="top-search-list">
          <el-input
            style="margin-right:20px"
            v-model="name"
            placeholder="请输入书籍名称"
            size="large"
            prefix-icon="Search"
            maxlength="30"
            clearable
          />
          <el-button
            type="primary"
            size="large"
            icon="Search"
            style="width: 20%;"
            @click="searchEvent(name)"
          >搜索</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonSearch",
  data() {
    return {
      name: "",
      author: ""
    }
  },
  methods: {
    searchEvent(name){
      // 提交数据到book的vuex中
      this.$store.commit('product/select_param',name) 
    }
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.top {
  background-color: white;
  padding-top: 10px;
  padding-bottom: 10px;
}
.top-logo {
  width: 1220px;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
.top-logo img {
  width: 100px;
  height: 100px;
  position: absolute;
  border-radius: 20px;
  left: 0;
}
.top-search {
  width: 500px;
  height: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.top-search-list {
  width: 500px;
  height: 40px;
  display: flex;
}
</style>